<!DOCTYPE html>
<html>
<head>
	<title>miterLimit</title>
</head>
<body>

	<canvas id="canvas" width="300" height="200px" style="border: 1px solid #ccc"></canvas>

	<form>
		<input type="text" size="3" style="width: 200px; padding: 2px 15px;" id="miterLimit">
		<input type="submit" name="" onclick="return draw();" value="draw">
	</form>

	<script type="text/javascript">
		
		draw();

		function draw() {
			var ctx = document.getElementById('canvas').getContext('2d');

			// Clear canvas
			ctx.clearRect(0, 0, 150, 150);

			// Draw guides
			ctx.strokeStyle = '#09f';
			ctx.lineWidth = 2;
			ctx.strokeRect(-5, 50, 160, 50);

			// Set line styles
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 10;

			console.log(document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/))

			// check input
			if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
				ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
			} else {
				// alert('Value must be a positive number');
			}

			// Draw lines
			ctx.beginPath();
			ctx.moveTo(0, 100);
			for (i = 0; i < 24 ; i++) {
				var dy = i % 2 == 0 ? 25 : -25;
				ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
			}

			ctx.stroke();

			return false
		}
	</script>

</body>
</html>